<!--
 * @Author: honghong
 * @Date: 2019-10-11 17:55:22
 * @LastEditors: honghong
 * @LastEditTime: 2019-10-14 16:24:54
 * @Description: 
 * @email: 3300536651@qq.com
 -->
<div class="fc-row">
  <div nz-row>
    <p nz-col nzSpan="24">
      更多组件使用 请跳转到: <a href="https://ng.ant.design/docs/introduce/zh"
        target="_blank">https://ng.ant.design/docs/introduce/zh</a>
    </p>
    <div nz-col nzSpan="24">
      <nz-alert nzType="info" nzMessage="Ant Design 组件"></nz-alert>
    </div>
    <div nz-col nzSpan="24">
      <div class="carousel-wrap">
        <nz-carousel nzAutoPlay>
          <div nz-carousel-content *ngFor="let item of carsousels">
            <div class="carsousel-box">
              <img [src]="item.src" width="100%" height="300" />
            </div>
          </div>
        </nz-carousel>
      </div>

    </div>
    <div nz-col nzSpan="24">
      <nz-card nzTitle="按钮" class="fc-card">
        <button nz-button nzType="primary">Primary</button>
        <button nz-button nzType="default">Default</button>
        <button nz-button nzType="dashed">Dashed</button>
        <button nz-button nzType="danger">Danger</button>
        <button nz-button nzType="link">Link</button>
      </nz-card>
    </div>
    <div nz-col nzSpan="24">
      <nz-card nzTitle="标签" class="fc-card">
        <div>
          <nz-tag [nzColor]="'magenta'">magenta</nz-tag>
          <nz-tag [nzColor]="'red'">red</nz-tag>
          <nz-tag [nzColor]="'volcano'">volcano</nz-tag>
          <nz-tag [nzColor]="'orange'">orange</nz-tag>
          <nz-tag [nzColor]="'gold'">gold</nz-tag>
          <nz-tag [nzColor]="'lime'">lime</nz-tag>
          <nz-tag [nzColor]="'green'">green</nz-tag>
          <nz-tag [nzColor]="'cyan'">cyan</nz-tag>
          <nz-tag [nzColor]="'blue'">blue</nz-tag>
          <nz-tag [nzColor]="'geekblue'">geekblue</nz-tag>
          <nz-tag [nzColor]="'purple'">purple</nz-tag>
        </div>
        <div>
          <nz-tag [nzColor]="'#f50'">#f50</nz-tag>
          <nz-tag [nzColor]="'#2db7f5'">#2db7f5</nz-tag>
          <nz-tag [nzColor]="'#87d068'">#87d068</nz-tag>
          <nz-tag [nzColor]="'#108ee9'">#108ee9</nz-tag>
        </div>
      </nz-card>
    </div>
    <div nz-col nzSpan="24">
      <nz-card nzTitle="警告提示" class="fc-card">
        <div>
          <nz-alert nzType="success" nzMessage="Success Text"></nz-alert>
          <nz-alert nzType="info" nzMessage="Info Text"></nz-alert>
          <nz-alert nzType="warning" nzMessage="Warning Text"></nz-alert>
          <nz-alert nzType="error" nzMessage="Error Text"></nz-alert>
        </div>
      </nz-card>
    </div>
  </div>
  <div nz-row nzGutter="16">
    <div nz-col nzSpan="8">
      <nz-card nzTitle="标题" class="fc-card">
        <div>
          <h1 nz-title>h1. Ant Design</h1>
          <h2 nz-title>h2. Ant Design</h2>
          <h3 nz-title>h3. Ant Design</h3>
          <h4 nz-title>h4. Ant Design</h4>
        </div>
      </nz-card>
    </div>
    <div nz-col nzSpan="8">
      <nz-card nzTitle="文本组件" class="fc-card">
        <div>
          <span nz-text>Ant Design</span>
          <br>
          <span nz-text nzType="secondary">Ant Design</span>
          <br>
          <span nz-text nzType="warning">Ant Design</span>
          <br>
          <span nz-text nzType="danger">Ant Design</span>
          <br>
          <span nz-text nzDisabled>Ant Design</span>
          <br>
          <span nz-text><mark>Ant Design</mark></span>
          <br>
          <span nz-text><code>Ant Design</code></span>
          <br>
          <span nz-text><u>Ant Design</u></span>
          <br>
          <span nz-text><del>Ant Design</del></span>
          <br>
          <span nz-text><strong>Ant Design</strong></span>
        </div>
      </nz-card>
    </div>
    <div nz-col nzSpan="8">
      <nz-card nzTitle="文档样例" class="fc-card">
        <div>
          <h2 nz-title>
            设计资源
          </h2>
          <p nz-paragraph>
            我们提供完善的设计原则、最佳实践和设计资源文件 （<span nz-text><code>Sketch</code></span> 和
            <span nz-text><code>Axure</code></span>），来帮助业务快速设计出高质 量的产品原型。
          </p>
          <article nz-typography>
            <ul>
              <li>
                <a href="/docs/spec/proximity">设计原则</a>
              </li>
              <li>
                <a href="/docs/pattern/navigation">设计模式</a>
              </li>
              <li>
                <a href="/docs/resource/download">设计资源</a>
              </li>
            </ul>
          </article>
        </div>
      </nz-card>
    </div>
  </div>
</div>
